<!doctype html>
<html>
	<head>
		<title>isLoading jQuery plugin</title>
		<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
        <link href="./style.css" rel="stylesheet">

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	</head>
	<body>
            
        <div class="header">

            <div class="container wrapper">
                <h1>isLoading | jQuery plugin</h1>
                <h3>Project on Github: <a href="https://github.com/hekigan/is-loading">https://github.com/hekigan/is-loading</a></h3>
            </div>

        </div>

		<div class="container wrapper" style="position: relative;">
			
            <div class="top-menu">
                <ul class="nav nav-list">
                    <li class="nav-header">Menu</li>
                    <li><a href="#">Top</a></li>
                    <li><a href="#basic">Basic</a></li>
                    <li><a href="#in-tag">In Tag</a></li>
                    <li><a href="#overlay">Overlay</a></li>
                    <li><a href="#overlay-tag">Overlay on Tag</a></li>
                </ul>
            </div>

            <h3>Download links:</h3>

            <ul>
                <li>development version: <a href="../jquery.isloading.js">jquery.isloading.js</a></li>
                <li>minified version: <a href="../jquery.isloading.min.js">jquery.isloading.min.js</a></li>
            </ul>

            <h3>Default options:</h3>

            <pre>
defaults = {
    'position': "right",        // right | inside | overlay
    'text': "",                 // Text to display next to the loader
    'class': "icon-refresh",    // loader CSS class
    'tpl': '&lt;span class="isloading-wrapper %wrapper%"&gt;%text%&lt;i class="%class% icon-spin"&gt;&lt;/i&gt;&lt;/span&gt;',
    'disableSource': true,      // true | false
    'disableOthers': []
};
            </pre>


<!-- BASIC -->
            <div id="basic">
                
                <a name="basic"></a>

                <h3>Basic Loading</h3>

                <p>
                    This is the most basic setup.
                    Just use <code>$( "selector" ).isLoading();</code> and you are done for the setup.
                </p>

                <p>
                    When your action (data loading, etc...) is done, just call <code>$( "selector" ).isLoading( "hide" );</code> and you are done.
                </p>

                <div class="demo well">
                    <p class="alert">container</p>
                    <span class="btn">Test</span>
                </div>

                <pre class="example syntax javascript"></pre>

<script>
$(function() {

    // Action on Click
    $( "#basic .btn" ).click(function() {

        $( this ).isLoading();

        // Load data or whatever
        $( "#basic .demo p" ).removeClass("alert-success");

        // Data Loaded, re-enable event
        setTimeout( function(){

            // Deactivate the loading plugin
            $( "#basic .btn" ).isLoading( "hide" );

            $( "#basic .demo p" ).html( "Content Loaded" )
                           .addClass("alert-success"); 
        }, 1000 );
    });

});
</script>

                
            </div>
<!--// BASIC -->

<!-- LOAD IN DOM -->
			<div id="load-in-div">
                
                <a name="in-tag"></a>

				<h3>Load in Tag</h3>

                <p>
                    This demo shows how to show the loading message inside the target. <code>$( "selector" ).isLoading({ text: "Loading", position: "inside" });</code>
                </p>

                <p>
                    If you want to disable some extra tags/input/etc... while the loading is active, you can use the <code>disableOthers[]</code> option.
                </p>

				<div id="load1" class="demo well">
					<p class="alert">container</p>
					<span class="btn">Test</span>
				</div>

                <pre class="example syntax javascript"></pre>

<script>
$(function() {

    // Action on Click
    $( "#load-in-div .btn" ).click(function() {

        // Setup Loading plugin
        $( "#load-in-div .demo p" ).removeClass("alert-success").isLoading({
            text:       "Loading", 
            position:   "inside",
            disableOthers: [
                $( "#load-in-div .btn" )
            ]
        });

        // Re-enabling event
        setTimeout( function(){ 
            $( "#load-in-div .demo p" ).isLoading( "hide" )
                                 .html( "Content Loaded" )
                                 .addClass("alert-success"); 
        }, 1000 );

    });

});
</script>

				
			</div>
<!--// LOAD IN DOM -->

<!-- OVERLAY -->
            <div id="load-overlay">
                
                <a name="overlay"></a>

                <h3>Overlay</h3>

                <div class="demo well">
                    <p class="alert">container</p>
                    <span class="btn">Test</span>
                </div>

                <pre class="example syntax javascript"></pre>

<script>
$(function() {

    // Action on Click
    $( "#load-overlay .btn" ).click(function() {

        $.isLoading({ text: "Loading" });
        
        // Setup Loading plugin
        $( "#load-overlay .demo p" ).removeClass("alert-success");

        // Re-enabling event
        setTimeout( function(){ 
            $.isLoading( "hide" );
            $( "#load-overlay .demo p" ).html( "Content Loaded" )
                                        .addClass("alert-success"); 
        }, 2000 );

    });

});
</script>

                
            </div>
<!--// OVERLAY -->

<!-- OVERLAY AN ELEMENT -->
            <div id="load-overlay-elt">
                
                <a name="overlay-tag"></a>

                <h3>Overlay on Tag</h3>

                <div class="demo well">
                    <p class="alert">container</p>
                    <span class="btn">Test</span>
                </div>

                <pre class="example syntax javascript"></pre>

<script>
$(function() {

    // Action on Click
    $( "#load-overlay-elt .btn" ).click(function() {
        
        $( "#load-overlay-elt .demo" ).isLoading({
                            text:       "Loading",
                            position:   "overlay"
                        });
        
        // Setup Loading plugin
        $( "#load-overlay-elt .demo p" ).removeClass("alert-success");

        // Re-enabling event
        setTimeout( function(){ 
            $( "#load-overlay-elt .demo" ).isLoading( "hide" );
            $( "#load-overlay-elt .demo p" ).html( "Content Loaded" )
                                        .addClass("alert-success"); 
        }, 2000 );

    });

});
</script>

                
            </div>
<!--// OVERLAY AN ELEMENT -->

		</div>

        <!-- syntax highlighter -->
        <script src="http://www.codeotaku.com/_static/jquery-syntax/jquery.syntax.min.js" type="text/javascript"></script>

		<script src="../jquery.isloading.js" type="text/javascript"></script>
		<script>
			$(function() {
				$( ".container script" ).each( function( i, e ) {;
					$( e ).siblings("pre.example").html( $( e ).html().trim() ).wrapInner( "<code />" );
				});
                $.syntax();
			});
		</script>
		
	</body>
</html>